<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    cartItems: {
        type: Array,
        default: () => []
    },
    totalPrice: {
        type: Number,
        default: 0
    }
});

const emits = defineEmits(['remove', 'change']);

const removeFromCart = (item) => {
    emits('remove', item);
};

const handleChange = (item) => {
    emits('change', item);
};
</script>

<template>
    <el-card>
        <h2>购物车</h2>
        <div v-if="cartItems.length">
            <div v-for="(item, i) in cartItems" :key="i">
                <img :src="item.img" width="200px" height="200px" />
                <p>{{item.name}}</p>
                <p>单价: {{item.price}}</p>
                <el-input-number v-model="item.number" :min="0" :max="item.stock" @change="handleChange(item)"></el-input-number>
                <el-button @click="removeFromCart(item)">移除</el-button>
                <el-divider style="margin: 10px 0;"></el-divider>
            </div>
            <p>总价: {{totalPrice}}</p>
            <el-button>结算</el-button>
        </div>
        <div v-else>
            <el-empty description="暂无商品"></el-empty>
        </div>
    </el-card>
</template>

<style scoped>

</style>
    